<template>
  <view class="search" @tap="searchsLose" :style="{ height: windowHeight + 'px' }">
    <!-- 搜索 -->
    <view class="tops" :style="{ paddingTop: menuButtonT + 'px' }">
      <view class="return" @click.stop="returnBack">
        <image style="width: 10px" mode="widthFix" src="http://cdn.jxsr.com/feel3.png" />
      </view>
      <view class="inp" style="-webkit-flex: 1; flex: 1" @click.stop="searchsFocus">
        <!-- @blur="searchsLose" -->
        <uni-easyinput :inputBorder="false" @input="searchsInput" @focus="searchsFocus" v-model="value"
          placeholder="输入商品名称"></uni-easyinput>
        <view class="ssk" v-if="sskShow">
          <view v-for="(item, index) in searchList" :key="index" @click.stop="shop(item)">{{ item.name }}</view>
        </view>
      </view>
      <view class="sear" style="width: 60px" :style="{ marginRight: customBarlef + customBarrig + 10 + 'px' }"
        @click.stop="search">搜索</view>
    </view>
    <!-- 搜索的数据 -->
    <view class="commodity_box" :style="{ marginTop: customBarH + menuButtonT + 10 + 'px' }" v-if="dataShow">
      <!-- 搜索的商品 -->
      <view class="mess">
        <view class="commodity" v-for="(item, index) in lists" :key="index" @tap="spnavigateTo(item.id)">
          <image mode="widthFix" :src="item.image" />
          <view class="shops">
            <text>{{ item.name }}</text>
            <view class="operate">
              <view class="jg">
                <span class="sp1">¥<span>{{ item.vipPrice }}</span>/{{ item.size || '斤' }}
                </span>
                <span :class="item.isBenefit == 1 ? 'red' : 'green'">{{ item.isBenefit == 1
                  ?
                  '特价' : "时价" }}</span>
              </view>
              <view class="qiang">马上抢</view>
            </view>
          </view>
        </view>
        <view class="list_bots" v-if="spshowLoadMore">{{ sploadMoreText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { querySpecialOffers } from '@/utils/api.js';
export default {
  data() {
    return {
      statursBarH: getApp().globalData.statursBarH,
      customBarH: getApp().globalData.customBarH,
      menuButtonT: getApp().globalData.menuButtonT,
      customBarlef: getApp().globalData.customBarlef,
      customBarrig: getApp().globalData.customBarrig,

      windowHeight: 0,
      navid: 2,
      value: '',
      //
      sskShow: false,
      // 搜索数据
      searchList: [],
      // 历史搜索数据
      historyList: [],
      // 热门搜索
      hotList: [],

      // 搜索数据是否展示
      dataShow: true,
      // 搜索店铺数据
      listData: [],
      // 搜索商品数据
      lists: [],

      loadMoreText: '加载中...',
      showLoadMore: false,
      sploadMoreText: '加载中...',
      spshowLoadMore: false,
      // 最大值
      max: 5,
      // 页数
      current: 1,
      // 每页数量
      pageSize: 10,
    };
  },
  mounted() {
    // 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
    var _this = this;
    uni.getSystemInfo({
      success: function (res) {
        // console.log(res);
        _this.windowHeight = res.windowHeight * 0.9;
      },
    });
  },
  // 监听页面卸载
  onUnload() {
    (this.navid = 1), (this.value = ''), (this.sskShow = false), (this.dataShow = false);
    (this.max = 0),
      (this.listData = []),
      (this.lists = []),
      (this.loadMoreText = '加载更多'),
      (this.showLoadMore = false);
    (this.sploadMoreText = '加载更多'), (this.spshowLoadMore = false);
    (this.current = 1), (this.pageSize = 5);
  },
  // 页面滚动到底部的事件
  onReachBottom() {
    console.log('onReachBottom');
    if (this.lists.length > this.max || this.sploadMoreText == '没有更多商品了!') {
      this.sploadMoreText = '没有更多商品了!';
      return;
    }
    this.spshowLoadMore = true;
    this.current += 1;
    setTimeout(() => {
      this.initData();
    }, 300);
  },
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    console.log('onPullDownRefresh');
    this.current = 1;
    this.initData();
  },
  methods: {
    // 切换
    navqh(index) {
      this.navid = index;
      (this.max = 0), (this.current = 1), (this.pageSize = 5);
    },
    // 返回上一页
    returnBack() {
      uni.navigateBack();
    },
    // 内容发生变化
    searchsInput(e) {
      console.log(e);
      if (e == '') {
        (this.navid = 1), (this.value = ''), (this.sskShow = false), (this.dataShow = false);
        (this.max = 0),
          (this.listData = []),
          (this.lists = []),
          (this.loadMoreText = '加载更多'),
          (this.showLoadMore = false);
        (this.sploadMoreText = '加载更多'), (this.spshowLoadMore = false);
        (this.current = 1), (this.pageSize = 5);
      }
    },
    // 获取焦点
    searchsFocus(e) {
      if (this.historyList.lenght != 0) {
        this.sskShow = true;
      }
    },
    //失去焦点
    searchsLose(e) {
      this.sskShow = false;
    },
    // 搜索
    search() {
      // console.log(this.value);
      this.sskShow = false;
      this.initData();
    },
    // 获取数据
    initData() {
      // 获取商品数据
      querySpecialOffers({
        name: this.value,
        pageNum: this.current,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {

            if (this.current == 1) {
              this.lists = res.data.products;
            } else {
              this.lists = this.lists.concat(res.data.products);
            }

            if (this.lists.length < 10) {
              this.spshowLoadMore = true;
              this.sploadMoreText = '没有更多商品了!';
            }

            this.dataShow = true;
            uni.stopPullDownRefresh();
          } else {
            uni.showToast({ title: res.msg, position: 'bottom' });
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom' });
        });
      // 获取商铺数据
      querySpecialOffers({
        name: this.value,
        current: this.current,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code === 200) {
            // console.log(res);
            this.listData = res.data;
            if (this.listData.length < 5) {
              this.showLoadMore = true;
              this.loadMoreText = '没有更多商品了!';
            }
            this.dataShow = true;
            uni.stopPullDownRefresh();
          } else {
            uni.showToast({ title: res.msg, position: 'bottom' });
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom' });
        });
    },
    // 下拉加载数据
    setListData() {
      let data = [];
      if (this.navid == 1) {
        // 获取店铺数据
        querySpecialOffers({
          name: this.value,
          current: this.current,
          pageSize: this.pageSize,
        })
          .then((res) => {
            if (res.code === 200) {
              // console.log(res);
              data = res.data;
              if (data.length < 5) {
                this.showLoadMore = true;
                this.loadMoreText = '没有更多商品了!';
              }
              this.listData = this.listData.concat(data);
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom' });
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom' });
          });
      } else {
        // 获取店铺数据
        querySpecialOffers({
          name: this.value,
          current: this.current,
          pageSize: this.pageSize,
        })
          .then((res) => {
            if (res.code === 200) {
              // console.log(res);
              data = res.data;
              if (data.length < 5) {
                this.showLoadMore = true;
                this.loadMoreText = '没有更多搬运工了!';
              }
              this.lists = this.lists.concat(data);
            } else {
              uni.showToast({ title: '请求错误', position: 'bottom' });
            }
          })
          .catch((err) => {
            uni.showToast({ title: '网络繁忙', position: 'bottom' });
          });
      }
    },

    // 清空历史搜索
    empty() {
      this.historyList = [];
    },
    // 点击搜索数据跳转
    shop(item) {
      // console.log(item);
      this.value = item.name;
      this.sskShow = false;
      this.search();
    },
    // 查看商户详情
    navigateTo(id) {
      uni.navigateTo({
        url: '/pages/index/details/shopDetails?id=' + id,
      });
    },
    // 查看商品详情
    spnavigateTo(id) {
      // console.log(id);
      uni.navigateTo({
        url: '/pages/goods/detail?id=' + id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 100%;

  // 搜索
  .tops {
    width: 100%;
    height: 30px;
    padding: 0 0 10px 0;
    background-color: #e9f3e5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    display: flex;
    align-items: center;

    .return {
      height: 30px;
      padding: 0 15px 0 20px;
      display: flex;
      align-items: center;

      image {
        width: 10px;
        height: 20px !important;
      }
    }

    .inp {
      height: 30px;
      background: #ffffff;
      border-radius: 46px;
      border: 1px solid $primaryTextColor;
      margin: 0 15px 0 0;
      position: relative;

      ::v-deep .uni-easyinput {
        .uni-easyinput__content {
          min-height: 30px;
        }
      }

      .ssk {
        margin: 1px 7px 0 7px;
        padding: 0 10px;
        z-index: 500;
        // position: absolute;
        // top: 31px;
        // left: 0;
        // bottom: 0;
        // right: 0;
        background: #ffffff;
        box-shadow: 0px 2px 4px 0px rgba(29, 155, 93, 0.3);
        border-radius: 8px;

        view {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $text;
          line-height: 36px;
        }
      }
    }

    .sear {
      height: 30px;
      background: linear-gradient(180deg, #b9d378 0%, #1b9a5d 100%);
      border-radius: 25px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 30px;
      text-align: center;
      margin-right: 20px;
    }
  }

  // 历史搜索
  .history {
    padding: 10px 20px 0 20px;
    background-color: #e9f3e5;

    .his_top {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $mainText;
      line-height: 18px;
    }

    .his_list {
      margin-top: 10px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $text;
      display: flex;
      flex-wrap: wrap;

      view {
        height: 26px;
        background: #ffffff;
        border-radius: 13px;
        padding: 0 15px;
        line-height: 26px;
        margin: 0 10px 10px 0;
      }
    }
  }

  // 热门搜索
  .hot {
    background: #f5f5f5;
    margin-top: 25px;
    padding: 10px 20px 0 20px;
  }

  .history:nth-child(2) {
    padding: 80px 20px 0 20px !important;
  }

  // 搜索的列表数据
  .commodity_box {

    // padding-top: 70px;
    .head_nav {
      height: 50px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $mainText;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .vis {
        height: 50px;
        position: relative;

        view {
          width: 20px;
          height: 2px;
          background: linear-gradient(232deg, #b9d378 0%, #1b9a5d 100%);
          border-radius: 3px;
          position: absolute;
          left: 30%;
          bottom: 20%;
        }
      }

      .vis:nth-child(2) {
        view {
          left: 18%;
          bottom: 20%;
        }
      }
    }

    .tenant {
      // width: 100%;
      padding: 0 10px 10px 10px;
      margin-top: 10px;

      .titles {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $mainText;
        line-height: 60px;
      }

      .lists {
        .list_xx {
          height: 110px;
          padding: 10px 10px;
          background-color: #fff;
          border-radius: 10px;
          margin-bottom: 15px;
          display: flex;

          image {
            width: 100px;
            height: 100px !important;
            border-radius: 8px;
          }

          .message {
            width: 70%;
            height: 110px;
            padding: 0 10px;
            display: flex;

            .content {
              width: 80%;
              height: 100%;

              text {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                color: $mainText;
                // line-height: 35px;
                font-weight: bold;
              }

              view {
                width: 100%;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: $text;
                line-height: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .dzs {
                margin-top: 5px;
              }
            }

            .distance {
              width: 20%;
              height: 100%;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .list_bots {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: $mainText;
          line-height: 30px;
          text-align: center;
        }
      }
    }

    .mess {
      padding: 10px;

      .commodity {
        height: 120px;
        background: #ffffff;
        margin-bottom: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;

        image {
          width: 100px;
          height: 100px;
          margin: 10px;
          border-radius: 8px;
        }

        .shops {
          -webkit-flex: 1;
          flex: 1;
          height: 100px;
          padding-right: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          text {
            font-size: 15px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: $mainText;
          }

          .operate {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .jg {
              font-size: 13px;
              font-family: PingFangSC-Medium, PingFang SC;
              line-height: 22px;

              .red {
                color: #ff0000;
                padding-left: 12rpx;

              }

              .green {
                color: #1b9a5d;
                padding-left: 12rpx;
              }

              .sp1 {
                font-size: 13px;
                font-weight: 600;
                color: #ff0000;

                span {
                  font-size: 19px;
                }
              }

              .sp2 {
                font-weight: 400;
                color: #999999;
                text-decoration: line-through;
                padding: 0 5px;
              }
            }

            .qiang {
              width: 80px;
              height: 36px;
              background: linear-gradient(232deg, #b9d378 0%, #1b9a5d 100%);
              border-radius: 10px;
              font-size: 15px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 36px;
              text-align: center;
            }
          }
        }
      }

      .list_bots {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $mainText;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
</style>
